.banner{
    width:100%;
    position:relative;
    h1{
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        z-index: 2;
        letter-spacing: 6px;
        color: #ffffff;
        position:absolute;
        top:30%;
        text-align:center;
        width:100%;
    }
    .search-bar{
        width:95%;
        height:34px;
        position:absolute;
        top:66%;
        left:50%;
        transform:translate(-50%,-50%);
        z-index:2;
       .search-btn{
               width:70%;
               height:34px;
               border-top-left-radius: 17px;
               border-bottom-left-radius: 17px;
               float:left;
               border:0;
               padding-left: 15px;
           }
           .click-btn{
               width:24%;
               height:34px;
               background-color: #b58f56;
               border-top-right-radius: 17px;
               border-bottom-right-radius: 17px;
               text-align:center;
               line-height:34px;
               color:#fff;
               float:left;
               border:0;
               font-size:12px;
               font-family:"PingFang-SC-Medium";
           }
    }
    .top-search{
        position:absolute;
        top:90%;
        left:50%;
        transform:translate(-50%,-50%);
        z-index:2;
        p,a{
            font-family: "MicrosoftYaHei";
            font-size: 14px;
            color: #ffffff;
            display:inline-block;
            float:left;
        }
    }
    .swiper-container{
        width:100%;
        .swiper-wrapper{
            width:100%;
            height:auto;
            .swiper-slide{
                width:100%;
                height:auto;
                img{
                    width:100%;
                }
            }
        }
        .swiper-pagination{
            left: 70%;
            span{
                float:left;
                background:#fff;
            }
        }
    }
}
.content{
    margin-top:8px;
    .content-item{
        .con-item{
            .project-img{
                width:100%;
                height:228px;
            }
            h2{
                font-family: "PingFang-SC";
                font-weight:bold;
                font-size: 16px;
                line-height: 60px;
                color: #333333;
                padding:0 12px;
            }
            .item-detail{
                font-family: "MicrosoftYaHei";
                font-size: 14px;
                color: #bbbbbb;
                margin-bottom:20px;
                padding:0 12px;
            }
            .affiliation{
                margin-bottom:15px;
                padding:0 12px;
                .affiliation-user{
                    float:left;
                    .portrait{
                        float:left;
                        width:15px;
                        height:15px;
                        border-radius:50%;
                        img{
                            border-radius:50%;
                        }
                    }
                    p{
                        float:left;
                        margin-left:10px;
                        font-size: 12px;
                        color:#666;
                    }
                }
                .affiliation-location{
                    float:right;
                    img{
                        float:left;
                    }
                    p{
                        float:left;
                        margin-left:7px;
                        font-size: 12px;
                        color:#666;
                    }
                }
            }
        }
    }
}

.mask{
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    z-index: 100;
    display:none;
    .login,.reg{
        width: 270px;
        background-color: #ffffff;
        border-radius: 10px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        padding:10px;
        display:none;
        h1{
            width:100%;
            height: 30px;
            margin-bottom: 20px;
            span{
                margin:7px 0 0 12px;
                display:inline-block;
                float:left;
                font-family: "PingFang-SC";
                font-weight:bold;
                font-size: 18px;
                color: #333333;
            }
            .to-choose{
                float:right;
                width:14px;
                height:14px;
            }
        }
        .input-img{
            width:100%;
            position:relative;
            height: 40px;
            .text,.password,.confirm,.code{
                width:100%;
                height:35px;
                border:0;
                border-bottom:1px solid #eee;
                position:absolute;
                left:0;
                top:0;
            }
           .close-btn{
               width:9px;
               height:9px;
               position:absolute;
               right:3px;
               top:15px;
           }
           .look{
               width:14px;
               height:9px;
               position:absolute;
               right:0;
               top:15px;
           }
           .getCode{
                position: absolute;
                right: 3px;
                top: 5px;
                font-size: 11px;
                background: #eee;
                text-align: center;
                padding: 5px;
                border:0;
           }
        }
        .describe{
            font-family: PingFang-SC-Medium;
            font-size: 11px;
            color: #999999;
            margin: 12px 0 12px 0;
            em{
                font-style:normal;
                font-family: PingFang-SC-Medium;
                font-size: 11px;
                color: #333333;
            }
        }
        .err-info,.reg-err{
            width:100%;
            color:red;
            height:20px;
            text-align: center;
            font-size: 14px;
            margin-bottom: 5px;
        }
        .login-btn,.reg-btn{
            display:block;
            width: 100%;
            height: 44px;
            background-color: #b68f56;
            border-radius: 22px;
            text-align:center;
            line-height:44px;
            color:#fff;
        }
    }
    .choose-method{
        width: 82%;
        height: 345px;
        background-color: #ffffff;
        border-radius: 10px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        padding:0 25px;
        h1{
            width:100%;
            .close{
                width:14px;
                height:14px;
                float:right;
                margin:10px 12px 22px 0;
            }
        }
        h2{
            width:100%;
            text-align:center;
            img{
                margin-bottom:40px;
                width:108px;
                height:60px;
            }
        }
        .regLogin-btn{
            width: 100%;
            height: 44px;
            margin-bottom:20px;
            a{
                display:inline-block;
                width:40%;
                height:100%;
                background-color: #b68f56;
                border-radius: 22px;
                font-family: PingFang-SC-Medium;
                font-size: 15px;
                color: #ffffff;
                text-align:center;
                line-height:44px;
            }
           .toreg-btn{
                margin-right:18%;
           }
        }
        .line{
            width:100%;
            height:1px;
            background:#eee;
            position:relative;
            margin-bottom:25px;
            color:#999;
            span{
                display:inline-block;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                background:none;
                padding:0 15px;
            }
        }
        .methods{
            width:100%;
            .method-item{
                width:33%;
                float:left;
                dd{
                    width:100%;
                    text-align: center;
                    img{
                        width:48px;
                        height:48px;
                    }
                }
                dt{
                    font-family: PingFang-SC-Medium;
                    font-size: 11px;
                    color: #666666;
                    text-align:center;
                }
            }
        }
    }
}